<template>
  <div class="top">
    <span style="color:#096dd9">通知管理 </span> / <span> 发布通知</span>
  </div>
  <div class="form">
    <tiny-form label-width="100px"  :model="form" ref="ruleFormRef"  :validate-type="validType">
      <tiny-form-item prop="title" required label="标题">
        <tiny-input v-model="form.title" placeholder="标题"></tiny-input>
      </tiny-form-item>
       <tiny-form-item prop="start" required label="开始时间">
        <tiny-input v-model="form.start" placeholder="标题"></tiny-input>
      </tiny-form-item>
       <tiny-form-item prop="end" required label="结束时间">
        <tiny-input v-model="form.end" placeholder="结束时间"></tiny-input>
      </tiny-form-item>

 <tiny-form-item prop="theme" required label="主题">

        <tiny-select v-model="form.theme">
      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" >
      </tiny-option>
    </tiny-select>
      </tiny-form-item>

   <tiny-form-item prop="content" required label="内容">
       <tiny-input v-model="form.content" type="textarea"> </tiny-input>
      </tiny-form-item>
      <tiny-button class="btn" type="primary" @click="handleSubmit"> 提交</tiny-button>
    </tiny-form>
  </div>
  <list style="width:90%"></list>
</template>
<script setup>
import {ref, reactive,inject} from 'vue'
import {
  Form as TinyForm,
  FormItem as TinyFormItem,
  Input as TinyInput,
  Button as TinyButton,
  Select as TinySelect, Option as TinyOption, Notify,
} from '@opentiny/vue'
import list from "./noticeList.vue"
const axios = inject("axios")
const options = ref([
  { value: 'blue', label: 'blue', },
  { value: 'green', label: 'green',},
  { value: 'yellow', label: 'yellow',},
     { value: 'cyan', label: 'cyan',},
     { value: 'blue', label: 'blue',}]
)
const validType = ref('text')
const ruleFormRef = ref(null)

const form = reactive({
  title: "",
  start: "2023-05-16 11:00:00",
  end: "2023-05-16 14:00:00",
  content: "",
  theme:""
})

function handleSubmit() {
  ruleFormRef.value.validate((valid) => {
   if(valid){
    axios.post("/notice",form).then(res=>{
      if(res.data.code==1){
        Notify({
          title: '发布成功',
          type: 'success',
          position: 'top-right',
        })
      }else {
        Notify({
          title: '发布失败',
          type: 'error',
          position: 'top-right',
        })
      }
    }).catch(err=>{
      Notify({
        title: '网络异常',
        type: 'error',
        position: 'top-right',
      })
    })
   }

  })
}

</script>

<style scoped lang="less">
.top {
  width: 100%;
  height: 70px;
  line-height: 70px;
  padding: 0 20px;

}
.demo-tag-create .tiny-tag {
  margin-left: 10px;
}

.demo-tag-create .tiny-button.button-new-tag {
  margin-left: 10px;
  height: 22px;
  line-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
}

.demo-tag-create .tiny-input {
  width: 90px;
  height: 22px;
  line-height: 20px;
  margin-left: 10px;
  vertical-align: middle;
}

.demo-tag-create .tiny-input .tiny-input__inner {
  height: 22px;
  line-height: 20px;
}
.tiny-form-item {
  margin: 40px 0 !important;
}
.btn{
 float: right;
}
.form{
  width: 90%;
}
</style>